<template>
	
	<div id="collection">
		
		<div id="cheader" >
			<div id="csearch">
				<img src="../../assets/img/search.png" alt="" />
				<span>搜索收藏</span>
			</div>
		</div>
		
		<div class="uncol" v-show="status">
			<h1>把美食与爱保存下来</h1>
			<div>没人生来就是好厨师，轻点收藏，将你最喜欢的菜谱保存下来，为你的下一顿私房红烧肉最好准备。</div>
			<span @click="change">登录</span>
			<span @click="changer">手机注册</span>
		</div>
		
		
		<div class="col" v-show="!status">
			<div id="cmenu">
				<ul>
					<li>菜谱</li>
					<li>菜单</li>
					<li>浏览历史</li>
				</ul>
			</div>
			
			<div id="ccollection">
				<div id="cshou">
					<div>
						<p>你好像还未收藏过</p>
						<p>如果你喜欢某个菜谱，只需将它收藏，以后就可以
						<br />在这里找到</p>
						<p>寻找高人气菜谱</p>
					</div>
				</div>
			</div>
		</div>
		
		
	</div>
	
</template>

<script>	
	export default {

		methods: {
			change(){
				this.$store.commit('changeLoginState');
			},
			changer(){
				this.$store.commit('changeRegState');
			}
		},
		computed: {
			status(){
				return this.$store.state.status;
			}
		}
	}
</script>

<style scoped>
	
	#collection{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	#cheader{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 1.865384rem;
		display: flex;
		align-items: center;
	}
	#csearch{
		width:70%;
		height:1.153846rem;
		background: #f2f2f0;
		border-radius: 0.096153rem;
		margin:auto;
		line-height: 1.153846rem;
		text-align: center;
		color: #95958f;
		font-size: 0.346153rem;
	}
	#csearch img{
		width: 0.451923rem;
		height:0.451923rem;
		vertical-align: middle;
		margin-right:0.192307rem;
	}
	#csearch div{
		vertical-align: middle;
		display: flex;
		
	}
	#ccollection{
		position: absolute;
		left: 0;
		right: 0;
		top:3.115384rem;
		bottom:0;
		overflow: auto;
	}
	.uncol{
		position: absolute;
		left: 0;
		right: 0;
		top:1.865384rem;
		padding-top:2.115384rem;
	}
	.uncol h1{
		font-size: 0.634615rem;
		font-weight: normal;
		text-align: center;
		margin-bottom:1.5rem;
	}
	.uncol div{
		width:70%;
		margin:auto;
		font-size: 0.298076rem;
		margin-bottom:1.25rem;
		text-align: center;
	}
	.uncol span{
		display: block;
		width:9.230769rem;
		height:1.153846rem;
		background: #6fbd53;
		text-align: center;
		margin: auto;
		font-size: 0.355769rem;
		color:white;
		line-height: 1.153846rem;
		margin-bottom:0.576923rem;
	}
	.uncol :nth-child(4){
		background: #f96650;
		margin-bottom:1.307692rem;
	}
	.uncol p{
		font-size: 0.365384rem;
		color:#f96650;
		text-align: center;
	}
	#cmenu{
		position: absolute;
		left: 0;
		right: 0;
		top:1.865384rem;
	}
	#cmenu ul{
		display: flex;
		align-items: center;
		height:1.25rem;
	}
	#cmenu ul li{
		height:1.25rem;
		width:33%;
		text-align: center;
		font-size: 0.336538rem;
		color:#383835;
		line-height: 1.25rem;
	}
	#cshou{
		height:100%;
		display: flex;
		align-items: center;
	}
	#cshou div{
		width:100%;
		text-align: center;
	}
	#cshou div p:nth-child(1){
		font-size:0.557692rem;
		margin-bottom:1.509615rem;
	}
	#cshou div p:nth-child(2){
		font-size:0.317307rem;
		margin-bottom:1.442307rem;
	}
	#cshou div p:nth-child(3){
		font-size:0.365384rem;
		color:#f96650;
	}
</style>